<!DOCTYPE html>
<!--[if IE 6]>
<html id="ie6" class="ancient-ie old-ie no-js" dir="ltr">
<![endif]-->
<!--[if IE 7]>
<html id="ie7" class="ancient-ie old-ie no-js" dir="ltr">
<![endif]-->
<!--[if IE 8]>
<html id="ie8" class="old-ie no-js" dir="ltr">
<![endif]-->

<!--[if !(IE 6) | !(IE 7) | !(IE 8)  ]><!-->
<html dir="ltr" class="no-js">
<!--<![endif]-->
<head>

	<meta charset="UTF-8" />
	<meta name="viewport" content="initial-scale=1, maximum-scale=2">

	<title>PressCore | Banners & Teasers</title>

	<!--[if IE]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	<link href="css/normalize.css" rel="stylesheet" type="text/css">
	<link href="css/wireframe.css" rel="stylesheet" type="text/css">
	<link href="css/main.css" rel="stylesheet" type="text/css">
	<link href="css/media.css" rel="stylesheet" type="text/css">
	<link href="skins/red/custom.css" rel="stylesheet" type="text/css" id="skin-style">

	<!-- RoyalSlider -->
	<link rel="stylesheet" href="royalslider/royalslider.css">
	<link rel="stylesheet" href="css/plugins.css">
	<link rel="stylesheet" href="js/plugins/pretty-photo/css/prettyPhoto.css" type="text/css">

	<link href="http://fonts.googleapis.com/css?family=Lato:400,700,900" rel="stylesheet" type="text/css"> <!-- All skins -->
	<link href="http://fonts.googleapis.com/css?family=Titillium+Web:600,600italic" rel="stylesheet" type="text/css"> <!-- "Retro" skin -->
	<link href="http://fonts.googleapis.com/css?family=Patua+One" rel="stylesheet" type="text/css"> <!-- "Business" skin -->
	<link href="http://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet" type="text/css"> <!-- "Green" skin -->
	<link href="http://fonts.googleapis.com/css?family=Sanchez" rel="stylesheet" type="text/css"> <!-- "Organic" skin -->

	<script src="js/modernizr.js"></script>

</head>

<body class="page">
<div id="page" ><!-- class="boxed" -->

	<!-- !Top-bar -->
	<div id="top-bar" role="complementary">
		<div class="wf-wrap">
			<div class="wf-table wf-mobile-collapsed">
				<div class="wf-td">

					<div class="mini-contacts wf-float-left">
						<ul>
							<li class="address">10230 Santa Monica BLVD Los Angeles</li>
							<li class="phone">+3 045 224 33 12</li>
							<li class="email"><a href="mailto:info@yoursite.com">info@yoursite.com</a></li>
						</ul>
					</div>

					<!-- <div class="mini-nav wf-float-left">
						<ul>
							<li><a href="#">Support Policy</a></li>
							<li><a href="#">Online Helpdesk</a></li>
							<li><a href="#">ThemeForest Profile</a></li>
						</ul>
					</div> -->

				</div>
				<div class="wf-td">

					<div class="mini-search wf-float-right wf-mobile-hidden">
						<form role="search" method="get" action="#">
							<input type="text" class="field" name="searchquery" placeholder="Search">
							<input type="submit" class="assistive-text" name="submit" value="go">
							<a href="#go" class="submit"></a>
						</form>
					</div>

					<!-- <div class="mini-lang wf-float-right">
						<ul>
							<li><a href="#"><img alt="en" src="images/en.png">English</a></li>
							<li><a href="#"><img alt="sv" src="images/sv.png">Svenska</a></li>
						</ul>
					</div> -->

				</div>
			</div><!-- .wf-table -->
		</div><!-- .wf-wrap -->
	</div><!-- #top-bar -->

	<header id="header" class="logo-left" role="banner"><!-- class="overlap"; class="logo-left", class="logo-center", class="logo-classic" -->
		<div class="wf-wrap">
			<div class="wf-table">

				<!-- !- Branding -->
				<div id="branding" class="wf-td">
					<a href="index-2.html"><img src="skins/red/red.header-logo-regular.png" width="189" height="79" alt="PressCore: multipurpose HTML framework"></a>
					<div id="site-title" class="assistive-text">PressCore</div>
					<div id="site-description" class="assistive-text">multipurpose HTML framework</div>
				</div>

				<!-- !- Navigation -->	
								<nav id="navigation" class="wf-td">
					<ul id="main-nav" class="fancy-rollovers wf-mobile-hidden" role="navigation"><!-- class="fancy-rollovers" is not avaliable for "logo-classic" header layout -->
						<li class="has-children">
							<a href="index-2.html">Home</a>
							<ul class="sub-nav">
								<li><a href="index-2.html">Homepage 1</a></li>
								<li><a href="index-3.html">Homepage 2</a></li>
								<li><a href="index-4.html">Homepage 3</a></li>
								<li><a href="index-5.html">Homepage 4</a></li>
								<li><a href="index-6.html">Homepage 5</a></li>
							</ul>
						</li>
						<li class="has-children">
							<a href="index-2.html">Slideshows</a>
							<ul class="sub-nav">
								<li><a href="slideshow-fullscreen.html">Slideshow fullscreen</a></li>
								<li><a href="slideshow-fixed.html">Slideshow fixed</a></li>
								<li><a href="3D-fullscreen.html">3D gallery fullscreen</a></li>
								<li><a href="3D-fixed.html">3D gallery fixed</a></li>
								<li><a href="metro-slideshow.html">Metro slideshow</a></li>
							</ul>
						</li>
						<li class="has-children">
							<a href="#3">Blog</a>
							<ul class="sub-nav">
								<li><a href="blog-masonry.html">Blog masonry fullwidth</a></li>
								<li><a href="blog-masonry-sidebar.html">Blog masonry with sidebar</a></li>
								<li><a href="blog-standard.html">Blog standard</a></li>
								<li><a href="blog-fancy.html">Blog with fancy header</a></li>
								<li><a href="post.html">Blog post</a></li>
							</ul>
						</li>
						<li class="has-children">
							<a href="#5">Portfolio</a>
							<ul class="sub-nav">
								<li class="has-children">
								<a href="#51">Portfolio masonry</a>
								<ul class="sub-nav">
									
									<li><a href="portfolio-masonry.html">Portfolio masonry fullwidth</a></li>
									<li><a href="portfolio-masonry-sidebar.html">Portfolio masonry with sidebar</a></li>
									<li><a href="portfolio-masonry-text-hoovers.html">Portfolio masonry text hoovers</a></li>

								</ul>
								</li>
								<li class="has-children">
								<a href="#52">Portfolio grid</a>
								<ul class="sub-nav">

									<li><a href="portfolio-grid.html">Portfolio grid fullwidth</a></li>
									<li><a href="portfolio-grid-sidebar.html">Portfolio grid with sidebar</a></li>
									<li><a href="portfolio-grid-text-hoovers.html">Portfolio grid text hoovers</a></li>

								</ul>
								</li>

								<li class="has-children">
								<a href="#53">Portfolio standard</a>
								<ul class="sub-nav">
									
									<li><a href="portfolio-standard.html">Portfolio standard fullwidth</a></li>
									<li><a href="portfolio-standard-sidebar.html">Portfolio standard with sidebar</a></li>

								</ul>
								</li>
								<li class="has-children">
								<a href="#53">Portfolio checker</a>
								<ul class="sub-nav">

									<li><a href="portfolio-checker.html">Portfolio checker fullwidth</a></li>

									<li><a href="portfolio-checker-sidebar.html">Portfolio checker with sidebar</a></li>

								</ul>
								</li>
								<li><a href="portfolio-fancy.html">Portfolio with fancy header</a></li>
								<li class="has-children">
								<a href="#54">Portfolio posts</a>
								<ul class="sub-nav">

									<li><a href="portfolio-post.html">Portfolio post fullwidth</a></li>
									<li><a href="portfolio-post-sidebar.html">Portfolio post with sidebar</a></li>
								</ul>
								</li>

							</ul>
						</li>
						<li class="has-children">
							<a href="#">Pages</a>
							<ul class="sub-nav">
								<li><a href="team.html">Team</a></li>
								<li><a href="testimonials.html">Testimonials</a></li>
								<li><a href="contact.html">Contact</a></li>
							</ul>
						</li>
						<li class="has-children">
							<a href="#5">Elements</a>
							<ul class="sub-nav">
								<li><a href="fancy-header.html">Fancy header</a></li>
								<li><a href="typography.html">Typography</a></li>
								<li class="act"><a href="banners-teasers.html">Banners & Teasers</a></li>
								<li><a href="service-clients.html">Services & Clients</a></li>
								<li><a href="tabbed-content.html">Tabbed content</a></li>
							</ul>
						</li>
					</ul>

					<a href="#show-menu" rel="nofollow" id="mobile-menu">
						<span class="menu-open">MENU</span>
						<span class="menu-close">CLOSE</span>
						<span class="menu-back">back</span>
						<span class="wf-phone-visible">&nbsp;</span>
					</a>
				</nav>
			</div><!-- .wf-table -->
		</div><!-- .wf-wrap -->
	</header><!-- #header -->

	

	<!-- !Main -->
	<div id="main" class="sidebar-none"><!-- class="sidebar-none", class="sidebar-left", class="sidebar-right" -->

		<div class="wf-wrap">
			<div class="wf-container-main">

				<!-- !- Content -->
				<div class="content">
					<h1>Banners & Teasers</h1>
					<div class="hr-breadcrumbs divider-heder">
						<div class="assistive-text">You are here:</div>
						<ol class="breadcrumbs wf-td text-small">
							<li><a href="#">home</a></li>
							<li><a href="#">elements</a></li>
							<li><a href="#">banners & teasers</a></li>
						</ol>
					</div>
					<div class="gap-10"></div>
					<div class="wf-container">
						

						<div class="wf-cell wf-1-4">
							<div class="shortcode-teaser frame-on frame-fancy img-full">
								<div class="shortcode-teaser-img">
									<img src="usr/teaser01.jpg">
								</div>
								<div class="shortcode-teaser-content">
									<h4>Duis accum mauris</h4>
									<p>Suspendisse lorem ipsum dolor amet communitas potenti ornare felis porttitor. Proin sit amet ante.</p>
									<p><a class="more-link details" href="#">Read more</a></p>
								</div>
							</div>
						</div>


						<div class="wf-cell wf-1-4">
							<div class="shortcode-teaser frame-on frame-fancy img-full  shortcode-single-video">
								<div class="shortcode-teaser-img">
									<div class="shortcode-teaser-video">								
										<iframe width="560" height="200" src="http://www.youtube.com/embed/wK3e4zDcdrQ" frameborder="0" allowfullscreen></iframe>
									</div>
								</div>
								<div class="shortcode-teaser-content">
									<h4>Lorem ipsum dolor</h4>
									<p>Operdiet nec augue. Donec nec gravida dui. Maecenas non arcu pharetra cursus pulvinar. </p>
									<p><a class="more-link details" href="#">Read more</a></p>
								</div>
							</div>
						</div>

						
						<div class="wf-cell wf-1-4">
							<div class="shortcode-teaser frame-on shortcode-single-video">
								<div class="shortcode-teaser-img">
									<div class="shortcode-teaser-video">
										<iframe width="560" height="300" src="http://player.vimeo.com/video/28051776" frameborder="0" allowfullscreen></iframe>
									</div>
								</div>
								<div class="shortcode-teaser-content">
									<h4>Class aptent taciti</h4>
									<p> Phasellus tristique nunc vitae erat sagittis nibh maecenas posuere elit quis lectus bibend.</p>
									<p><a class="more-link details" href="#">Read more</a></p>
								</div>
							</div>
						</div>


						<div class="wf-cell wf-1-4">
							<div class="shortcode-teaser frame-on">
								<div class="shortcode-teaser-img">
									<a class="rollover rollover-zoom" href="usr/teaser02-big.jpg" rel="prettyPhoto">
										<img src="usr/teaser02.jpg">
									</a>
								</div>
								<div class="shortcode-teaser-content">
									<h4>Nulla lorem augue</h4>
									<p> Maecenas eu velit a ante hendrerit volutpat quis tristique nunc vitae erasit amet erat.</p>
									<p><a class="more-link details" href="#">Read more</a></p>
								</div>
							</div>
						</div>
					</div>


					<div class="gap-20"></div>

					<div class="wf-container">
	
						<div class="wf-cell wf-1-2">
							<div class="shortcode-teaser frame-on frame-fancy">

								<div class="shortcode-teaser-content">
									<div class="gap-10"></div>
									<h4>Dolor liquet interdum</h4>
									<p>Curabitur vitae turpis dui, ac consequat ante. Ut ullamcorper felis ac sapien ornare consectetur. Suspendisse potenti lorem ipsum mollis sapien volutpat et ornare felis porttitor. Proin sit amet ante. Integer lorem ipsum mollis sapien volutpat. Quisque fringilla iaculis. Maecenas felis sem, accumsan vel fringilla a mattiso.</p>
									<p><a href="#" class="more-link dt-btn">Details</a></p>
								</div>
							</div>
						</div>


						<div class="wf-cell wf-1-2">
							<div class="shortcode-teaser frame-on">

								<div class="shortcode-teaser-content">
									<div class="gap-10"></div>
									<h4>Dolor liquet interdum</h4>
									<p>Curabitur vitae turpis dui, ac conse quat ante ut ullam corper felis ac sapien ornare consec tetur. Suspen disse potenti lorem ipsum mollis sapien volutpat et ornare.Proin sit amet ante nteger lorem ipsum mollis sapien volutpat. Quisque iaculis leo eget bibendum maecenas felis sem, lorem ipsum accumsan vel fringilla a mattiso.</p>
									<p><a href="#" class="more-link dt-btn">Details</a></p>
								</div>
							</div>
						</div>


						<div class="wf-cell wf-1">
						<div class="gap-20"></div>
						<section class="shortcode-action-box shortcode-action-bg plain-bg text-centered no-line">
							<div class="shortcode-action-container">
								<div class="shortcode-action-container">
									<h3>Introducing PressCore- multi-purpose HTML framework!</h3>
									<p>And it has some awesome features, premium sliders, unlimited colors, advanced theme options and so much more! 
	    							Pellentesque ut eleifend a, porta sed augue etere posuere nisl mi vitae felis leo, et cursus leo libero in nisi. Donec sit amet ipsum velit, a faucibus lorem ipsum dolor sit amet. </p>
								</div>							
								<div class="shortcode-action-container action-button">
									<a href="#" class="dt-btn dt-btn-xl">Sumple button</a>
								</div>
							</div>
						</section>


						<div class="gap-20"></div>

						<section class="shortcode-action-box shortcode-action-bg block-style-widget box-style-table">
							<div class="shortcode-action-container">
								<div class="shortcode-action-container">
									<h3>Introducing PressCore- multi-purpose HTML framework!</h3>
									<p>And it has some awesome features, premium sliders, unlimited colors, advanced theme options and so much more! 
	    							Pellentesque ut eleifend a, porta sed augue etere posuere nisl mi vitae felis lorem ipsum dolor elementum erat lobortis. Lorem ipsum, ante sit amet imperdiet ultricies. </p>
								</div>							
								<div class="shortcode-action-container action-button">
									<a href="#" class="dt-btn dt-btn-xl">Sumple button</a>
								</div>
							</div>
						</section>
					</div>
					</div>

					<div class="gap-20"></div>
					<!-- !- Banners -->
						<div class="wf-container">
							<div class="wf-cell wf-1-4">
								<div class="shortcode-banner" style="background-image: url(usr/banner2.jpg); min-height:270px; text-align: center;">
									<div class="shortcode-banner-bg wf-table" style="padding: 10px; min-height:270px;">
										<div class="shortcode-banner-inside wf-table" style="background-color: rgb(43,45,96); background-color: rgba(0,7,68,0.56); border: solid 10 px transparent; outline: solid 2px #fff; color:#fff; height:250px;">
											<div style="display: inline-block;">
												<h3 style="color:#f8f8f8;">Lorem dolor</h3>
												<p style="color:#f8f8f8;">Hasellus id magna vestibulum posuere. Etiam lacus augue, pellentesque eu eleifend tincidunt.</p>
											</div>
										</div>
									</div>
								</div>
							</div>

							<div class="wf-cell wf-1-4">
								<div class="shortcode-banner" style="background-image: url(usr/checker04.jpg); min-height:270px; text-align: center;">
									<div class="shortcode-banner-bg wf-table" style="padding: 10px; min-height:270px;">
										<div class="shortcode-banner-inside wf-table" style="background-color: rgb(189,44,57); background-color: rgba(215,59,55,0.5); border: solid 5px transparent; outline: solid 1px #fff; color:#fff; height:250px;">
											<div style="display: inline-block;">
												<h3 style="color:#ffffff;">Lorem dolor</h3>
												<p style="color:#ffffff;">Hasellus id magna vestibulum posuere. Etiam lacus augue, pellentesque eu eleifend tincidunt.</p>
											</div>
										</div>
									</div>
								</div>
							</div>


							<div class="wf-cell wf-1-2">
								<div class="shortcode-banner" style="background-image: url(usr/banner1.jpg); min-height:270px; text-align: center;">
									<div class="shortcode-banner-bg wf-table" style="border: 60px solid rgb(36,193,221); border: 60px solid rgba(36,193,221,0.1); min-height:270px;">
										<div class="shortcode-banner-inside wf-table" style="background-color: rgb(42,194,232); background-color: rgba(36,193,221,0.8); color:#fff; outline: 5px solid #ffffff; height:150px;">
											<div style="display: inline-block;">
												<h3 style="color:#fff;"> Aoreet ullam corper</h3>
												<p style="color:#fff;">Ellentesque arcu turpis, pharetra ut ornare non, lorem ipsum nec augue. Donec nec gravida dui.</p>
											</div>
										</div>
									</div>
								</div>
							</div>

							<div class="gap-20"></div>

							<div class="wf-cell wf-1">
								<div class="shortcode-banner" style="background-image: url(usr/banner3.jpg); min-height:170px; text-align: center;">
									<div class="shortcode-banner-bg wf-table" style="padding: 10px; min-height:170px;">
										<div class="shortcode-banner-inside wf-table" style="background-color: rgb(76,84,86); background-color: rgba(0,0,0,0.3); border: solid 10px transparent; outline: solid 1px #fff; color:#fff; height:170px;">
											<div style="display: inline-block;">
												<h3 style="color:#fff;">Quisquit amet imperdiet ultricie</h3>
												<p style="color:#fff;">Hasellus id magna vestibulum posuere</p>
											</div>
										</div>
									</div>
								</div>
							</div>

							<div class="gap-20"></div>

							<div class="wf-cell wf-1-2">
								<div class="shortcode-banner shortcode-banner-link" style="background-image: url(usr/banner4.jpg); min-height:200px; text-align: center;">
									<div class="shortcode-banner-bg wf-table" style="border:10px solid rgb(36,193,221); border: 10px solid rgba(36,193,221,0.8); min-height:200px;">
										<div class="shortcode-banner-inside wf-table" style="background-color: rgb(79,170,57); background-color: rgba(56,138,16,0.6); color:#fff; outline: 10px solid #ffffff; height:180px;">
											<div style="display: inline-block;">
												<h3 style="color:#fff;"> Cras porttitor ullamcorper</h3>
												<p style="color:#fff;">Ellentesque uisque dignissim, ante sit amet elis enim luctus leo, et cursus leo libero in nisi. Donec sit amet ipsum dolor sit amet. donec nec gravida dui.</p>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="wf-cell wf-1-2">
								<div class="shortcode-banner shortcode-banner-link" style="background-image: url(usr/banner5.jpg); min-height:200px; text-align: center;">
									<div class="shortcode-banner-bg wf-table" style="border: 20px solid rgb(31,53,73); border: 20px solid rgba(31,53,73,0.8); min-height:200px;">
										<div class="shortcode-banner-inside wf-table" style="background-color: rgb(15,70,88); background-color: rgba(31,53,73,0.8); color:#fff; outline: 2px solid #668d9f; height:160px;">
											<div style="display: inline-block;">
												<h3 style="color:#fff;"> Cras porttitor aoreet ullamcorper</h3>
												<p style="color:#fff;">Ellentesque arcu turpis, pharetra ut ornare non, lorem ipsum dolor amet imperdiet nec augue. Donec nec gravida dui.</p>
											</div>
										</div>
									</div>
								</div>
							</div>

						</div>
						<div class="gap-10"></div>

						<!-- !-- Stripe -->

				</div><!-- .content -->

			</div><!-- .wf-container-main -->
		</div><!-- .wf-wrap -->

	</div><!-- #main -->
		
	

	<!-- !Bottom-bar -->
	<div id="bottom-bar" role="contentinfo">
		<div class="wf-wrap">
			<div class="wf-table wf-mobile-collapsed">

				<div id="branding-bottom" class="wf-td">
					<img src="skins/red/red.bottom-bar-logo-regular.png" width="38" height="48" alt="PressCore: multipurpose HTML framework">
				</div>

				<div class="wf-td">
					<div class="wf-float-left">&copy; 2012&ndash;2013. Dream-Theme &mdash; truly <a href="http://dream-theme.com/" target="_blank">premium WordPress themes</a>.</div>
				</div>

				<div class="wf-td">

					<div class="mini-nav wf-float-right">
						<ul>
							<li><a href="http://support.dream-theme.com/support-policy" target="_blank">Support Policy</a></li>
							<li><a href="http://support.dream-theme.com/" target="_blank">Online Helpdesk</a></li>
							<li><a href="http://themeforest.net/user/Dream-Theme" target="_blank">ThemeForest Profile</a></li>
						</ul>
					</div>

				</div>

			</div>
		</div><!-- .wf-wrap -->
	</div><!-- #bottom-bar -->

</div><!-- #page -->


<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery-migrate-1.1.1.min.js"></script>

<!-- RoyalSlider -->
<script src="royalslider/jquery.royalslider.js"></script>
<script src="js/plugins/pretty-photo/js/jquery.prettyPhoto.js"></script>
<script src="js/plugins.js"></script>

<script src="js/main.js"></script>

<link rel="stylesheet" href="presscore-demo/css/show.css" type="text/css" />
<script type="text/javascript" src="presscore-demo/js/demo.js"></script>
</body>
</html>